<template>
  <view class="main">
    <u-navbar
      :background="{ backgroundColor: 'rgb(61, 95, 255)' }"
      title="人员轨迹历史"
      back-icon-color="#fff"
      title-color="#fff"
    ></u-navbar>

    <!-- 区县和煤矿筛选 -->
    <city-andCustomer
      isCountyName="countyStr"
      isCountyId="countyNo"
      isCustomerName="customerName"
      isCustomerId="mineCode"
      mineUrl="/alarm/common/getCustomers"
      countyUrl="/alarm/common/getCountys"
      :getSearchData="searchData"
      @searchList="searchList"
    ></city-andCustomer>

    <scroll-view
      :scroll-y="true"
      class="u-flex-1 of-hide"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      :refresher-threshold="50"
      refresher-background="#F5F5F5"
      @refresherrefresh="onRefresh"
      @scrolltolower="onScrollToLower"
    >
      <view class="flex list" v-for="(item, index) in listData" :key="index" @click="toDeails(item)">
        <view>
          <view style="color: #b8b8b8">{{ item.countyName }}</view>
          <view>{{ item.label }} </view>
        </view>
        <u-icon name="arrow-right" color="#288CFE" size="28"></u-icon>
      </view>
      <template v-if="!showEmpty">
        <view class="c-empty p-absolute-center">
          <u-empty text="抱歉，暂无相关数据~" :src="require('@/static/image/empty.png')"></u-empty>
        </view>
      </template>
      <view class="p-t-10 p-b-10" v-else>
        <u-loadmore :status="status" />
      </view>
    </scroll-view>
  </view>
</template>

<script>
import cityAndCustomer from "@/pages/components/cityAndCustomer.vue"; // 区县和煤矿企业下拉组件
export default {
  components: { cityAndCustomer },
  data() {
    return {
      listData: [],
      searchData: {
        countyNo: "",
        countyStr: "所有区县",
        customerStr: "",
        customerNo: "",
        customerName: "",
        customerCode: "",
        pageSize: 20,
        pageNumber: 1,
      },
      triggered: false,
      showEmpty: true,
      status: "loading",
    };
  },
  onLoad() {
    if (getApp().globalData.userInfo.superviseLevel !== "40") {
      this.searchData.countyNo = getApp().globalData.userInfo.countyNo;
    }
    this.getList();
  },
  methods: {
    toDeails(item) {
      uni.navigateTo({
        url: `./details?code=${item.id}&name=${item.label}`,
      });
    },
    searchList(e) {
      this.searchData = Object.assign(this.searchData, e);
      this.getList();
    },
    init() {
      this.searchData.pageNumber = 1;
      this.status = "loading";
      this.showEmpty = true;
    },
    onRefresh() {
      if (this.Isfreshing) return;
      this.Isfreshing = true;
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true;
        this.init();
        this.getList();
        setTimeout(() => {
          this.triggered = false; // 触发onRestore，关闭刷新图标
          this.Isfreshing = false;
        }, 1200);
      }
    },
    onScrollToLower() {
      if (this.status === "loading") {
        this.searchData.pageNumber++;
        this.getList();
      }
    },
    async getList() {
      this.$set(this.searchData, "customerCode", this.searchData.mineCode);
      const res = await this.$post("/alarm/common/page/getCustomers", this.searchData);
      if (res && res.body.content) {
        this.listData = this.searchData.pageNumber === 1 ? res.body.content : this.listData.concat(res.body.content);
        // 到底了
        if (res.body.content.length < this.searchData.pageSize) {
          this.status = "nomore";
        }
        // 数据空
        if (this.searchData.pageNumber === 1 && this.listData && this.listData.length === 0) {
          this.showEmpty = false;
        } else {
          this.showEmpty = true;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  justify-content: space-between;
  padding: 24rpx 32rpx;
  background-color: #fff;
  margin: 20rpx 32rpx;
  border-radius: 12rpx;
  box-shadow: 0px 1px 40rpx rgba(184, 184, 184, 0.2) !important;
  border-radius: 8rpx !important;
}
</style>
